κ³ κΈ νμ μμ€ν κΈ°λ₯, μ±λ₯ μ΅μ ν, κ°λ ₯νκ³ μ μ§λ³΄μ κ°λ₯ν μ ν리μΌμ΄μ κ΅¬μΆ μ λ΅μ μ¬μΈ΅μ μΌλ‘ νꡬνλ νμ μ€ν¬λ¦½νΈμ λ―Έλλ₯Ό μμ보μΈμ.
νμ μ€ν¬λ¦½νΈ μμ λ―Έλ: κΉ¨μ§μ§ μλ νμ μμ μ±μ μν λ‘λλ§΅
μλ°μ€ν¬λ¦½νΈμ μμ μ§ν©μΈ νμ μ€ν¬λ¦½νΈλ λμ μΈ μλ°μ€ν¬λ¦½νΈ μΈκ³μ μ μ νμ΄νμ μΆκ°ν¨μΌλ‘μ¨ νλ°νΈμλ λ° λ°±μλ κ°λ°μ νλͺ μ μΌμΌμΌ°μ΅λλ€. κ°λ ₯ν νμ μμ€ν μ μ€λ₯λ₯Ό μ‘°κΈ°μ κ°μ§νκ³ μ½λ μ μ§λ³΄μμ±μ ν₯μμν€λ©° κ°λ°μ μμ°μ±μ λμ λλ€. νμ μ€ν¬λ¦½νΈκ° κ³μ λ°μ ν¨μ λ°λΌ κ³ κΈ κΈ°λ₯κ³Ό λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄νλ κ²μ κ³ νμ§μ νμ₯ κ°λ₯ν μ ν리μΌμ΄μ μ ꡬμΆνλ λ° μ€μν©λλ€. μ΄ ν¬κ΄μ μΈ κ°μ΄λλ νμ μ€ν¬λ¦½νΈμ κ³ κΈ κ°λ , μ±λ₯ μ΅μ ν λ° λ―Έλ λ°©ν₯μ νꡬνμ¬ κΉ¨μ§μ§ μλ νμ μμ μ±μ λ¬μ±νκΈ° μν λ‘λλ§΅μ μ 곡ν©λλ€.
κ³ κΈ νμ μ ν
string, number, booleanκ³Ό κ°μ κΈ°λ³Έ νμ
μΈμλ νμ
μ€ν¬λ¦½νΈλ κ°λ°μκ° λ³΅μ‘ν λ°μ΄ν° ꡬ쑰μ κ΄κ³λ₯Ό μ λ°νκ² ννν μ μλ νλΆν κ³ κΈ νμ
μΈνΈλ₯Ό μ 곡ν©λλ€. μ΄λ¬ν νμ
μ λ§μ€ν°νλ κ²μ νμ
μ€ν¬λ¦½νΈμ μ μ¬λ ₯μ μ΅λν λ°ννλ λ° νμμ μ
λλ€.
μ‘°κ±΄λΆ νμ : νμ μμ€μμμ λ‘μ§
μ‘°κ±΄λΆ νμ μ μλ°μ€ν¬λ¦½νΈμ μΌν μ°μ°μμ μ μ¬νκ² μ‘°κ±΄μ λ°λΌ νμ μ μ μν μ μκ² ν΄μ€λλ€. μ΄ κ°λ ₯ν κΈ°λ₯μ μ μ°νκ³ μ μ κ°λ₯ν νμ μ μλ₯Ό μμ±ν μ μκ² ν©λλ€.
μμ:
type IsString<T> = T extends string ? true : false;
type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
μ€λͺ
: IsString νμ
μ μ‘°κ±΄λΆ νμ
μ μ¬μ©νμ¬ μ£Όμ΄μ§ νμ
Tκ° stringμ νμ₯νλμ§ νμΈν©λλ€. νμ₯νλ€λ©΄ νμ
μ trueλ‘ ν΄μλκ³ , κ·Έλ μ§ μλ€λ©΄ falseλ‘ ν΄μλ©λλ€. μ΄ μμλ μ‘°κ±΄λΆ νμ
μ΄ νμ
μμ€ λ‘μ§μ λ§λλ λ° μ¬μ©λ μ μμμ 보μ¬μ€λλ€.
μ¬μ© μ¬λ‘: API μλ΅ μν μ½λμ λ°λΌ νμ μμ ν λ°μ΄ν° νμΉμ ꡬνν©λλ€. μλ₯Ό λ€μ΄, μ±κ³΅ λλ μ€λ₯ μνμ λ°λΌ λ€λ₯Έ λ°μ΄ν° λͺ¨μμ μ§μ ν©λλ€. μ΄λ API μλ΅μ λ°λΌ μ¬λ°λ₯Έ λ°μ΄ν° μ²λ¦¬λ₯Ό 보μ₯νλ λ° λμμ΄ λ©λλ€.
λ§€νλ νμ : νμ λ³νμ μ½κ²
λ§€νλ νμ μ κΈ°μ‘΄ νμ μ λ°λ³΅νμ¬ μλ‘μ΄ νμ μΌλ‘ λ³νν μ μκ² ν΄μ€λλ€. μ΄λ κ°μ²΄ νμ μ μμ±μ μμ νλ μ νΈλ¦¬ν° νμ μ λ§λλ λ° νΉν μ μ©ν©λλ€.
μμ:
type Readonly<T> = {
readonly [K in keyof T]: T[K];
};
type Person = {
name: string;
age: number;
};
type ReadonlyPerson = Readonly<Person>; // λͺ¨λ μμ±μ΄ μ΄μ readonlyκ° λ©λλ€.
μ€λͺ
: Readonly νμ
μ μ£Όμ΄μ§ νμ
Tμ λͺ¨λ μμ±μ readonlyλ‘ λ§λλ λ΄μ₯ λ§€νλ νμ
μ
λλ€. [K in keyof T] ꡬ문μ νμ
Tμ ν€λ₯Ό λ°λ³΅νλ©°, readonly ν€μλλ κ° μμ±μ λ³κ²½ λΆκ°λ₯νκ² λ§λλλ€.
μ¬μ© μ¬λ‘: ν¨μν νλ‘κ·Έλλ° ν¨λ¬λ€μμ μν λ³κ²½ λΆκ°λ₯ν λ°μ΄ν° ꡬ쑰λ₯Ό μμ±ν©λλ€. μ΄λ μνμ μ°λ°μ μΈ μμ μ λ°©μ§νκ³ μ ν리μΌμ΄μ μ λ°μ΄ν° 무결μ±μ 보μ₯νλ λ° λμμ΄ λ©λλ€.
μ νΈλ¦¬ν° νμ : νμ μ€ν¬λ¦½νΈμ λ§λ₯ λꡬ
νμ μ€ν¬λ¦½νΈλ μΌλ°μ μΈ νμ λ³νμ μννλ μΌλ ¨μ λ΄μ₯ μ νΈλ¦¬ν° νμ μ μ 곡ν©λλ€. μ΄λ¬ν νμ μ μ½λλ₯Ό ν¬κ² λ¨μννκ³ νμ μμ μ±μ ν₯μμν¬ μ μμ΅λλ€.
μΌλ° μ νΈλ¦¬ν° νμ :
Partial<T>:Tμ λͺ¨λ μμ±μ μ ν μ¬νμΌλ‘ λ§λλλ€.Required<T>:Tμ λͺ¨λ μμ±μ νμ μ¬νμΌλ‘ λ§λλλ€.Readonly<T>:Tμ λͺ¨λ μμ±μ readonlyλ‘ λ§λλλ€.Pick<T, K>:Tμμ μμ± μ§ν©Kλ₯Ό μ ννμ¬ μ νμ μ μμ±ν©λλ€.Omit<T, K>:Tμμ μμ± μ§ν©Kλ₯Ό μ μΈνμ¬ μ νμ μ μμ±ν©λλ€.Record<K, T>: ν€Kμ κ°Tλ₯Ό κ°μ§ νμ μ μμ±ν©λλ€.
μμ:
type User = {
id: number;
name: string;
email?: string;
};
type RequiredUser = Required<User>; // emailμ΄ μ΄μ νμμ
λλ€.
type UserWithoutEmail = Omit<User, 'email'>; // emailμ΄ μ κ±°λμμ΅λλ€.
μ¬μ© μ¬λ‘: μΌλΆ νλκ° μ ν μ¬νμΌ μ μλ νΌ λ°μ΄ν°λ₯Ό μ²λ¦¬ν©λλ€. Partial<T>λ νΌ λ°μ΄ν° κ°μ²΄λ₯Ό λνλ΄λ λ° μ¬μ©λ μ μμΌλ©°, Required<T>λ νΌμ μ μΆνκΈ° μ μ λͺ¨λ νμ νλκ° μλμ§ νμΈνλ λ° μ¬μ©λ μ μμ΅λλ€. μ΄λ νΌ μꡬ μ¬νμ΄ μμΉ λλ κ·μ μ λ°λΌ λ¬λΌμ§ μ μλ κ΅μ μ λ§₯λ½μμ νΉν μ μ©ν©λλ€.
μ λ€λ¦: νμ μμ μ±μ κ°μΆ μ¬μ¬μ© κ°λ₯ν μ½λ μμ±
μ λ€λ¦μ μ¬μ©νλ©΄ νμ μμ μ±μ μ μ§νλ©΄μ λ€μν νμ κ³Ό ν¨κ» μλνλ μ½λλ₯Ό μμ±ν μ μμ΅λλ€. μ΄λ μ¬μ¬μ© κ°λ₯ν κ΅¬μ± μμ λ° λΌμ΄λΈλ¬λ¦¬λ₯Ό λ§λλ λ° μ€μν©λλ€.
μμ:
function identity<T>(arg: T): T {
return arg;
}
let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(42);
μ€λͺ
: identity ν¨μλ νμ
Tμ μΈμλ₯Ό λ°μ λμΌν κ°μ λ°ννλ μ λ€λ¦ ν¨μμ
λλ€. <T> ꡬ문μ λͺ¨λ νμ
μ΄ λ μ μλ νμ
λ§€κ°λ³μ Tλ₯Ό μ μΈν©λλ€. ν¨μλ₯Ό νΈμΆν λ νμ
λ§€κ°λ³μλ₯Ό λͺ
μμ μΌλ‘ μ§μ νκ±°λ(μ: identity<string>) μΈμ νμ
μ λ°λΌ νμ
μ€ν¬λ¦½νΈκ° μΆλ‘ νλλ‘ ν μ μμ΅λλ€.
μ¬μ© μ¬λ‘: λ€λ₯Έ νμ μ λ°μ΄ν°λ₯Ό 보μ νλ©΄μ νμ μμ μ±μ 보μ₯νλ μ°κ²° 리μ€νΈ λλ νΈλ¦¬μ κ°μ μ¬μ¬μ© κ°λ₯ν λ°μ΄ν° ꡬ쑰λ₯Ό μμ±ν©λλ€. κ΅μ μ μ μκ±°λ νλ«νΌμ κ³ λ €ν΄λ³΄μμμ€. μ§μμ λ°λΌ μ¬λ°λ₯Έ ν΅ν κΈ°νΈμ νμμ΄ μ μ©λλλ‘ λ³΄μ₯νλ©΄μ μμΉ κ°μ νμ μμ μ±μ μ μ§νλ©΄μ μ§μμ λ°λΌ ν΅νλ₯Ό νμννλ μ λ€λ¦ ν¨μλ₯Ό λ§λ€ μ μμ΅λλ€.
νμ μΆλ‘ : νμ μ€ν¬λ¦½νΈκ° μμ νλλ‘ νκΈ°
νμ μ€ν¬λ¦½νΈμ νμ μΆλ‘ μμ€ν μ μ¬μ©λ²μ λ°λΌ λ³μμ ννμμ νμ μ μλμΌλ‘ μΆλ‘ ν©λλ€. μ΄λ₯Ό ν΅ν΄ λͺ μμ νμ μ£Όμμ νμμ±μ΄ μ€μ΄λ€μ΄ μ½λκ° λ κ°κ²°ν΄μ§λλ€.
μμ:
let message = "hello"; // νμ
μ€ν¬λ¦½νΈλ messageκ° stringμμ μΆλ‘ ν©λλ€.
let count = 42; // νμ
μ€ν¬λ¦½νΈλ countκ° numberμμ μΆλ‘ ν©λλ€.
function add(a: number, b: number) {
return a + b; // νμ
μ€ν¬λ¦½νΈλ λ°ν νμ
μ΄ numberμμ μΆλ‘ ν©λλ€.
}
μ€λͺ
: μμ μμμμ νμ
μ€ν¬λ¦½νΈλ μ΄κΈ° κ°κ³Ό μ¬μ©λ²μ κΈ°λ°μΌλ‘ message, count λ° addμ λ°ν νμ
μ νμ
μ μΆλ‘ ν©λλ€. μ΄λ₯Ό ν΅ν΄ λͺ
μμ νμ
μ£Όμμ νμμ±μ΄ μ€μ΄λ€μ΄ μ½λλ₯Ό λ μ½κΈ° μ½κ² λ§λλλ€.
μ¬μ© μ¬λ‘: 볡μ‘ν λ°μ΄ν° ꡬ쑰λ₯Ό λ°ννλ APIμ ν¨κ» μμ ν©λλ€. νμ μ€ν¬λ¦½νΈλ λ°νλ λ°μ΄ν°μ νμ μ μΆλ‘ ν μ μμΌλ―λ‘ λͺ μμ μΌλ‘ νμ μ μ μνμ§ μκ³ λ νμ μμ μ±μΌλ‘ μμ±μ μ‘μΈμ€ν μ μμ΅λλ€. μ μΈκ³ λ μ¨ APIμ μνΈ μμ©νλ μ ν리μΌμ΄μ μ μμν΄ λ³΄μμμ€. νμ μ€ν¬λ¦½νΈλ μ¨λ, μ΅λ λ° νμμ νμ μ μλμΌλ‘ μΆλ‘ ν μ μμΌλ―λ‘ μ§μμ κ΄κ³μμ΄ λ°μ΄ν°λ‘ μμ νκΈ°κ° λ μ½μ΅λλ€.
μ μ§μ νμ΄ν: νμ μ€ν¬λ¦½νΈλ₯Ό μ μ§μ μΌλ‘ μ±ννκΈ°
νμ μ€ν¬λ¦½νΈλ μ μ§μ νμ΄νμ μ§μνλ―λ‘ κΈ°μ‘΄ μλ°μ€ν¬λ¦½νΈ μ½λλ² μ΄μ€μ νμ μ€ν¬λ¦½νΈλ₯Ό μ μ§μ μΌλ‘ λμ ν μ μμ΅λλ€. μ΄λ μ 체 μ¬μμ±μ΄ λΆκ°λ₯ν λκ·λͺ¨ νλ‘μ νΈμ νΉν μ μ©ν©λλ€.
μ μ§μ νμ΄ν μ λ΅:
- κ°μ₯ μ€μν μ½λ λΆλΆλΆν° μμνμΈμ. μμ£Ό μμ λκ±°λ 볡μ‘ν λ‘μ§μ ν¬ν¨νλ λͺ¨λμ μ§μ€νμΈμ.
anyλ μ μ€νκ² μ¬μ©νμΈμ.anyλ νμ κ²μ¬λ₯Ό μ°νν μ μκ² ν΄μ£Όμ§λ§, νμ μ€ν¬λ¦½νΈμ λͺ©μ μ 무ν¨ννλ―λ‘ μ£Όμν΄μ μ¬μ©ν΄μΌ ν©λλ€.- μ μΈ νμΌ(
.d.ts)μ νμ©νμΈμ. μ μΈ νμΌμ κΈ°μ‘΄ μλ°μ€ν¬λ¦½νΈ λΌμ΄λΈλ¬λ¦¬ λ° λͺ¨λμ λν νμ μ 보λ₯Ό μ 곡ν©λλ€. - μΌκ΄λ μ½λ© μ€νμΌμ μ±ννμΈμ. λͺ λͺ κ·μΉκ³Ό μ½λ ꡬ쑰μ μΌκ΄μ±μ νμ μ€ν¬λ¦½νΈλ‘ λ§μ΄κ·Έλ μ΄μ νλ κ²μ λ μ½κ² λ§λλλ€.
μ¬μ© μ¬λ‘: νμ μ€ν¬λ¦½νΈλ‘μ μμ ν λ§μ΄κ·Έλ μ΄μ μ΄ λΉνμ€μ μΈ λκ·λͺ¨ λ κ±°μ μλ°μ€ν¬λ¦½νΈ νλ‘μ νΈ. μ μ§μ μΌλ‘ νμ μ€ν¬λ¦½νΈλ₯Ό λμ νλ©΄ κΈ°μ‘΄ μ½λλ² μ΄μ€λ₯Ό λ°©ν΄νμ§ μκ³ νμ μμ μ±μ μ΄μ μ λ릴 μ μμ΅λλ€. μλ₯Ό λ€μ΄, λ κ±°μ μν μ ν리μΌμ΄μ μ΄ μλ κ΅μ κΈμ΅ κΈ°κ΄μ κ°μ₯ μ€μν λͺ¨λμ μ μ§μ μΌλ‘ νμ μ€ν¬λ¦½νΈλ₯Ό λμ νμ¬ μ 체 μ¬μμ μμ΄ μμ€ν μ μμ μ±κ³Ό μ μ§λ³΄μμ±μ ν₯μμν¬ μ μμ΅λλ€.
μ±λ₯ μ΅μ ν: ν¨μ¨μ μΈ νμ μ€ν¬λ¦½νΈ μ½λ μμ±
νμ μ€ν¬λ¦½νΈλ μλ§μ μ΄μ μ μ 곡νμ§λ§, μ±λ₯ λ³λͺ© νμμ νΌνκΈ° μν΄ ν¨μ¨μ μΈ μ½λλ₯Ό μμ±νλ κ²μ΄ μ€μν©λλ€. λ€μμ νμ μ€ν¬λ¦½νΈ μ½λ μ΅μ νλ₯Ό μν λͺ κ°μ§ νμ λλ€.
- λΆνμν νμ λ¨μΈμ νΌνμΈμ. νμ λ¨μΈμ νμ κ²μ¬λ₯Ό μ°νν μ μμΌλ©° λ°νμ μ€λ₯λ₯Ό μ λ°ν μ μμ΅λλ€.
- κ°μ²΄ νμ μλ νμ λ³μΉ λμ μΈν°νμ΄μ€λ₯Ό μ¬μ©νμΈμ. μΈν°νμ΄μ€λ 볡μ‘ν κ°μ²΄ νμ μ λν΄ νμ λ³μΉλ³΄λ€ μΌλ°μ μΌλ‘ λ μ±λ₯μ΄ μ’μ΅λλ€.
anyμ¬μ©μ μ΅μννμΈμ.anyλ₯Ό μ¬μ©νλ©΄ νμ κ²μ¬κ° λΉνμ±νλκ³ λ°νμ μ€λ₯κ° λ°μν μ μμ΅λλ€.- λΉλ νλ‘μΈμ€λ₯Ό μ΅μ ννμΈμ. μ¦λΆ μ»΄νμΌ λ° μΊμ±μ μ¬μ©νμ¬ λΉλ νλ‘μΈμ€λ₯Ό κ°μννμΈμ.
- μ½λλ₯Ό νλ‘νμΌλ§νμΈμ. νλ‘νμΌλ§ λꡬλ₯Ό μ¬μ©νμ¬ μ±λ₯ λ³λͺ© νμμ νμ νκ³ κ·Έμ λ°λΌ μ½λλ₯Ό μ΅μ ννμΈμ.
μμ: type MyType = { a: number; b: string; } λμ , νΉν ν¬κ³ 볡μ‘ν κ°μ²΄ νμ
μ λ€λ£° λ μ±λ₯ ν₯μμ μν΄ interface MyType { a: number; b: string; }λ₯Ό μ νΈν©λλ€.
μ¬μ© μ¬λ‘: μ€μκ° λ°μ΄ν° μ²λ¦¬ λλ κ·Έλν½ λ λλ§κ³Ό κ°μ΄ λμ μ±λ₯μ΄ νμν μ ν리μΌμ΄μ . νμ μ€ν¬λ¦½νΈ μ½λλ₯Ό μ΅μ ννλ©΄ μ ν리μΌμ΄μ μ΄ μννκ³ ν¨μ¨μ μΌλ‘ μ€νλ©λλ€. μ€μκ°μΌλ‘ λ°©λν μμ κΈμ΅ λ°μ΄ν°λ₯Ό μ²λ¦¬ν΄μΌ νλ κΈλ‘λ² κ±°λ νλ«νΌμ κ³ λ €ν΄ λ³΄μμμ€. ν¨μ¨μ μΈ νμ μ€ν¬λ¦½νΈ μ½λλ νλ«νΌμ΄ μ±λ₯ λ¬Έμ μμ΄ μν¬λ‘λλ₯Ό μ²λ¦¬ν μ μλλ‘ νλ λ° νμμ μ λλ€. νλ‘νμΌλ§ λ° μ΅μ νλ₯Ό ν΅ν΄ λ³λͺ© νμμ νμ νκ³ μμ€ν μ μ λ°μ μΈ μ±λ₯μ ν₯μμν¬ μ μμ΅λλ€.
λμμΈ ν¨ν΄ λ° μν€ν μ²: νμ₯ κ°λ₯ν νμ μ€ν¬λ¦½νΈ μ ν리μΌμ΄μ ꡬμΆ
μ ν립λ λμμΈ ν¨ν΄κ³Ό μν€ν μ² μμΉμ μ±ννλ κ²μ νμ₯ κ°λ₯νκ³ μ μ§λ³΄μ κ°λ₯ν νμ μ€ν¬λ¦½νΈ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° μ€μν©λλ€. λ€μμ λͺ κ°μ§ μ£Όμ κ³ λ € μ¬νμ λλ€.
- λͺ¨λμ±: μ ν리μΌμ΄μ μ μκ³ λ 립μ μΈ λͺ¨λλ‘ λΆν νμ¬ λ 립μ μΌλ‘ κ°λ°νκ³ ν μ€νΈν μ μμ΅λλ€.
- μμ‘΄μ± μ£Όμ : μμ‘΄μ± μ£Όμ μ μ¬μ©νμ¬ λͺ¨λ κ°μ μμ‘΄μ±μ κ΄λ¦¬νκ³ ν μ€νΈ μ©μ΄μ±μ ν₯μμν΅λλ€.
- SOLID μμΉ: κ°μ²΄ μ§ν₯ μ€κ³μ SOLID μμΉμ λ°λΌ μ μ°νκ³ μ μ§λ³΄μ κ°λ₯ν μ½λλ₯Ό λ§λλλ€.
- λ§μ΄ν¬λ‘μλΉμ€ μν€ν μ²: ν¬κ³ 볡μ‘ν μ ν리μΌμ΄μ μ κ²½μ° λ§μ΄ν¬λ‘μλΉμ€ μν€ν μ²λ₯Ό κ³ λ €ν©λλ€.
μμ: μ΅μ λ² ν¨ν΄μ μ¬μ©νμ¬ μΉ μ ν리μΌμ΄μ μμ μ€μκ° μ λ°μ΄νΈλ₯Ό ꡬνν©λλ€. μ΄ ν¨ν΄μ 주체(μ: λ°μ΄ν° μμ€)μ μ΅μ λ²(μ: UI κ΅¬μ± μμ)λ₯Ό λΆλ¦¬νμ¬ μ£Όμ²΄λ₯Ό μμ νμ§ μκ³ μ΅μ λ²λ₯Ό μΆκ°νκ±°λ μ κ±°νκΈ° μ½κ² λ§λλλ€. μ μΈκ³μ μΌλ‘ λΆμ°λ μ ν리μΌμ΄μ μμ μ΅μ λ² ν¨ν΄μ λ€λ₯Έ μ§μμ ν΄λΌμ΄μΈνΈμ μ λ°μ΄νΈλ₯Ό ν¨μ¨μ μΌλ‘ μ ννλ λ° μ¬μ©ν μ μμ΅λλ€.
μ¬μ© μ¬λ‘: μκ°μ΄ μ§λ¨μ λ°λΌ νμ₯ κ°λ₯νκ³ μ μ§λ³΄μ κ°λ₯ν΄μΌ νλ ν¬κ³ 볡μ‘ν μ ν리μΌμ΄μ ꡬμΆ. λμμΈ ν¨ν΄κ³Ό μν€ν μ² μμΉμ μ½λλ₯Ό ꡬμ±νκ³ μ ν리μΌμ΄μ μ΄ μ±μ₯ν¨μ λ°λΌ μ§νν μ μλλ‘ λ³΄μ₯νλ νλ μμν¬λ₯Ό μ 곡ν©λλ€. μλ₯Ό λ€μ΄, κΈλ‘λ² μμ λ―Έλμ΄ νλ«νΌμ λ§μ΄ν¬λ‘μλΉμ€ μν€ν μ²μ μ΄μ μ λ릴 μ μμΌλ©°, λ€μν κΈ°λ₯(μ: μ¬μ©μ νλ‘ν, λ΄μ€ νΌλ, λ©μμ§)μ λ 립μ μΌλ‘ κ°λ°νκ³ λ°°ν¬ν μ μμ΅λλ€. μ΄λ νλ«νΌμ νμ₯μ±κ³Ό 볡μλ ₯μ ν₯μμν€κ³ μλ‘μ΄ κΈ°λ₯κ³Ό μ λ°μ΄νΈλ₯Ό μΆκ°νκΈ° μ½κ² λ§λλλ€.
κ΅μ ν(i18n) λ° νμ§ν(l10n)μ νμ μ€ν¬λ¦½νΈ
κΈλ‘λ² μμ²μλ₯Ό μν μ ν리μΌμ΄μ μ κ°λ°ν λλ κ΅μ ν(i18n) λ° νμ§ν(l10n)λ₯Ό κ³ λ €νλ κ²μ΄ νμμ μ λλ€. νμ μ€ν¬λ¦½νΈλ μ ν리μΌμ΄μ μ λ€μν μΈμ΄μ λ¬Ένμ μ½κ² μ μμν¬ μ μλλ‘ νλ λ° μ€μν μν μ ν μ μμ΅λλ€.
- νμ§ν λΌμ΄λΈλ¬λ¦¬ μ¬μ©:
i18nextλ°react-intlκ³Ό κ°μ λΌμ΄λΈλ¬λ¦¬λ λ²μμ κ΄λ¦¬νκ³ μ§μλ³ κ·μΉμ λ°λΌ λ°μ΄ν°λ₯Ό νμννλ λꡬλ₯Ό μ 곡ν©λλ€. - λ¬Έμμ΄ μΈλΆν: λͺ¨λ μ¬μ©μμκ² νμλλ λ¬Έμμ΄μ μΈλΆ νμΌμ μ μ₯νκ³ μ¬μ©μμ λ‘μΌμΌμ λ°λΌ λμ μΌλ‘ λ‘λν©λλ€.
- λ μ§, μ«μ λ° ν΅νλ₯Ό μ¬λ°λ₯΄κ² νμν: μ§μλ³ νμν ν¨μλ₯Ό μ¬μ©νμ¬ λ μ§, μ«μ λ° ν΅νκ° κ° μ§μμ λν΄ μ¬λ°λ₯΄κ² νμλλλ‘ ν©λλ€.
- 볡μν μ²λ¦¬: μΈμ΄λ§λ€ 볡μν κ·μΉμ΄ λ€λ¦ λλ€. νμ§ν λΌμ΄λΈλ¬λ¦¬λ₯Ό μ¬μ©νμ¬ λ³΅μνμ μ¬λ°λ₯΄κ² μ²λ¦¬ν©λλ€.
- μ€λ₯Έμͺ½μμ μΌμͺ½(RTL) μΈμ΄ μ§μ: μ ν리μΌμ΄μ λ μ΄μμμ΄ μλμ΄ λ° νλΈλ¦¬μ΄μ κ°μ RTL μΈμ΄μ μ¬λ°λ₯΄κ² μ μνλλ‘ ν©λλ€.
μμ: React μ ν리μΌμ΄μ
μμ λ²μμ κ΄λ¦¬νκΈ° μν΄ i18nextλ₯Ό μ¬μ©ν©λλ€. κ° μΈμ΄μ λν λ²μ νμΌμ μ μνκ³ μ¬μ©μμ λ‘μΌμΌμ λ°λΌ λμ μΌλ‘ λ‘λν μ μμ΅λλ€. νμ
μ€ν¬λ¦½νΈλ λ²μ ν€κ° μ¬λ°λ₯΄κ² μ¬μ©λκ³ λ²μλ λ¬Έμμ΄μ΄ νμ
μμ νμ§ νμΈνλ λ° μ¬μ©λ μ μμ΅λλ€.
// en.json
{
"greeting": "Hello, {{name}}!"
}
// fr.json
{
"greeting": "Bonjour, {{name}}!"
}
// Component.tsx
import i18next from 'i18next';
function MyComponent() {
const name = "World";
const greeting = i18next.t('greeting', { name });
return <div>{greeting}</div>;
}
μ¬μ© μ¬λ‘: μ μ μκ±°λ νλ«νΌ, μμ λ―Έλμ΄ μ ν리μΌμ΄μ λ° κΈλ‘λ² μμ²μλ₯Ό λμμΌλ‘ νλ κΈ°ν μ ν리μΌμ΄μ . κ΅μ ν λ° νμ§νλ λ€λ₯Έ μ§μμ μ¬μ©μμκ² μνν μ¬μ©μ κ²½νμ μ 곡νλ λ° νμμ μ λλ€. μλ₯Ό λ€μ΄, κΈλ‘λ² μ μ μκ±°λ νλ«νΌμ μ ν μ€λͺ , κ°κ²© λ° λ μ§λ₯Ό μ¬μ©μμ μ νΈ μΈμ΄ λ° νμμΌλ‘ νμν΄μΌ ν©λλ€. νμ μ€ν¬λ¦½νΈλ νμ§ν νλ‘μΈμ€κ° νμ μμ νμ§, λ²μλ λ¬Έμμ΄μ΄ μ¬λ°λ₯΄κ² μ¬μ©λλμ§ νμΈνλ λ° μ¬μ©λ μ μμ΅λλ€.
μ κ·Όμ±(a11y)κ³Ό νμ μ€ν¬λ¦½νΈ
μ κ·Όμ±μ μΉ κ°λ°μ μ€μν μΈ‘λ©΄μΌλ‘, μ₯μ κ° μλ μ¬λλ€λ μ ν리μΌμ΄μ μ μ¬μ©ν μ μλλ‘ ν©λλ€. νμ μ€ν¬λ¦½νΈλ νμ μμ μ±κ³Ό μ μ λΆμμ μ 곡νμ¬ λ μ κ·Ό κ°λ₯ν μ ν리μΌμ΄μ μ ꡬμΆνλ λ° λμμ΄ λ μ μμ΅λλ€.
- μλ―Έλ‘ μ HTML μ¬μ©:
<article>,<nav>,<aside>μ κ°μ μλ―Έλ‘ μ HTML μμλ₯Ό μ¬μ©νμ¬ μ½ν μΈ λ₯Ό λ Όλ¦¬μ μΌλ‘ ꡬ쑰νν©λλ€. - μ΄λ―Έμ§μ λν λ체 ν
μ€νΈ μ 곡:
altμμ±μ μ¬μ©νμ¬ μ΄λ―Έμ§μ λν μ€λͺ ν μ€νΈλ₯Ό μ 곡ν©λλ€. - ARIA μμ± μ¬μ©: ARIA μμ±μ μ¬μ©νμ¬ μμμ μν , μν λ° μμ±μ λν μΆκ° μ 보λ₯Ό μ 곡ν©λλ€.
- μΆ©λΆν μμ λλΉ λ³΄μ₯: μμ λλΉ κ²μ¬κΈ°λ₯Ό μ¬μ©νμ¬ ν μ€νΈκ° λ°°κ²½κ³Ό μΆ©λΆν λλΉλ₯Ό μ΄λ£¨λλ‘ ν©λλ€.
- ν€λ³΄λ νμ μ 곡: λͺ¨λ λνν μμλ₯Ό ν€λ³΄λλ₯Ό μ¬μ©νμ¬ μ‘μΈμ€νκ³ μ‘°μν μ μλμ§ νμΈν©λλ€.
μμ: νμ
μ€ν¬λ¦½νΈλ₯Ό μ¬μ©νμ¬ μ΄λ―Έμ§μ alt μμ± μ¬μ©μ κ°μ ν©λλ€. λͺ¨λ <img> μμμ alt μμ±μ΄ μμ΄μΌ νλ νμ
μ μ μν μ μμ΅λλ€.
interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
alt: string;
}
function MyImage(props: ImageProps) {
return <img {...props} />;
}
// μ¬μ©
<MyImage src="image.jpg" alt="μ΄λ―Έμ§μ λν μ€λͺ
" /> // μ¬λ°λ₯Έ μ
// <MyImage src="image.jpg" /> // μ€λ₯: altλ νμμ
λλ€.
μ¬μ© μ¬λ‘: λ€μν μ¬μ©μκ° μ¬μ©νλ μ λΆ μΉμ¬μ΄νΈμ κ°μ΄ λͺ¨λ μΉ μ ν리μΌμ΄μ . μ κ·Όμ±μ λͺ¨λ μ¬λμ΄ μ ν리μΌμ΄μ μ μ¬μ©ν μ μλλ‘ λ³΄μ₯νλ λ° νμμ μ λλ€. μλ₯Ό λ€μ΄, μ λΆ μΉμ¬μ΄νΈλ μ₯μ κ° μλ μ¬λλ€μκ² μ κ·Ό κ°λ₯ν΄μΌ ν©λλ€. νμ μ€ν¬λ¦½νΈλ μ κ·Όμ± λͺ¨λ² μ¬λ‘λ₯Ό μ μ©νκ³ μΉμ¬μ΄νΈκ° λͺ¨λ μ¬λμ΄ μ¬μ©ν μ μλλ‘ νλ λ° μ¬μ©λ μ μμ΅λλ€.
νμ μ€ν¬λ¦½νΈ λ‘λλ§΅: λ―Έλλ₯Ό ν₯ν μ λ§
νμ μ€ν¬λ¦½νΈλ μλ‘μ΄ κΈ°λ₯κ³Ό κ°μ μ¬νμ΄ μ κΈ°μ μΌλ‘ μΆκ°λλ©΄μ λμμμ΄ λ°μ νκ³ μμ΅λλ€. νμ μ€ν¬λ¦½νΈ λ‘λλ§΅μ μ΅μ μνλ‘ μ μ§νλ κ²μ μ΅μ λ°μ μ νμ©νκ³ μ΅μ²¨λ¨ μ ν리μΌμ΄μ μ ꡬμΆνλ λ° νμμ μ λλ€.
μ£Όμ μ§μ€ λΆμΌ:
- ν₯μλ νμ μΆλ‘ : νμ μ€ν¬λ¦½νΈλ λͺ μμ νμ μ£Όμμ νμμ±μ μ€μ΄κΈ° μν΄ νμ μΆλ‘ μμ€ν μ μ§μμ μΌλ‘ κ°μ νκ³ μμ΅λλ€.
- ν¨μν νλ‘κ·Έλλ°μ λν λ λμ μ§μ: νμ μ€ν¬λ¦½νΈλ μ»€λ§ λ° λΆλ³μ±κ³Ό κ°μ ν¨μν νλ‘κ·Έλλ° ν¨λ¬λ€μμ μ§μνλ μλ‘μ΄ κΈ°λ₯μ μΆκ°νκ³ μμ΅λλ€.
- ν₯μλ λꡬ: νμ μ€ν¬λ¦½νΈλ IDE ν΅ν© λ° λλ²κΉ κΈ°λ₯μ ν¬ν¨νμ¬ λꡬ μ§μμ κ°μ νκ³ μμ΅λλ€.
- μ±λ₯ μ΅μ ν: νμ μ€ν¬λ¦½νΈλ μ»΄νμΌλ¬ λ° λ°νμ μ±λ₯μ μ΅μ ννκΈ° μν΄ λ Έλ ₯νκ³ μμ΅λλ€.
κ²°λ‘ : κΉ¨μ§μ§ μλ νμ μμ μ±μ μν νμ μ€ν¬λ¦½νΈ μ±ν
νμ μ€ν¬λ¦½νΈλ κ°λ ₯νκ³ νμ₯ κ°λ₯νλ©° μ μ§λ³΄μ κ°λ₯ν μ ν리μΌμ΄μ μ ꡬμΆνλ κ°λ ₯ν λκ΅¬λ‘ λΆμνμ΅λλ€. κ³ κΈ κΈ°λ₯μ λ§μ€ν°νκ³ , λͺ¨λ² μ¬λ‘λ₯Ό μ±ννκ³ , λ‘λλ§΅μ μ΅μ μνλ‘ μ μ§ν¨μΌλ‘μ¨ νμ μ€ν¬λ¦½νΈμ μ μ¬λ ₯μ μ΅λν νμ©νκ³ κΉ¨μ§μ§ μλ νμ μμ μ±μ λ¬μ±ν μ μμ΅λλ€. μ‘°κ±΄λΆ λ° λ§€νλ νμ μ μ¬μ©ν 볡μ‘ν νμ μμ€ λ‘μ§ μμ±λΆν° μ±λ₯ μ΅μ ν λ° μ μΈκ³μ μ κ·Όμ± λ³΄μ₯κΉμ§, νμ μ€ν¬λ¦½νΈλ κ°λ°μκ° λ€μν κ΅μ μ μμ²μμ μꡬλ₯Ό μΆ©μ‘±νλ κ³ νμ§ μννΈμ¨μ΄λ₯Ό λ§λ€ μ μλλ‘ μ§μν©λλ€. νμ μ€ν¬λ¦½νΈλ₯Ό μ±ννμ¬ νμ μμ νκ³ μμ μ μΈ μ ν리μΌμ΄μ μ λ―Έλλ₯Ό ꡬμΆνμμμ€.